<template>
    <SearchHeader v-model:projectList="projectList" v-model:searchForm="searchForm"
                  @update:tags="searchForm.tags = $event" v-model:loading="loading"
                  v-model:total="total" v-model:currentPage="currentPage" v-model:pageSize="pageSize"
    />
    <el-main>
        <el-card v-loading="loading">
            <div v-if="projectList.length" class="list">
                <el-table :data="projectList" style="width: 100%" stripe lazy highlight-current-row
                          @row-click.self="check" v-loading="loading" :row-key="row => row.id">
                    <el-table-column fixed type="index" label="序号" width="75px" align="center"/>
                    <el-table-column prop="types" label="类型" width="120px" align="center"/>
                    <el-table-column prop="name" label="名称" min-width="200px" align="center"/>
                    <el-table-column prop="maturity" label="成熟度" width="90px" align="center" sortable/>
                    <el-table-column prop="grade" label="立项等级" width="110px" align="center" sortable>
                        <template #default="{row}">
                            <el-tag>{{ GRADE[row.grade] }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="reimbursementLimit" label="报销额度" width="110px" align="center" sortable/>
                    <el-table-column prop="startTime" :formatter="formattedDate" label="发布日期" width="120px" sortable align="center"/>
                    <el-table-column label="操作" fixed="right" width="250px" align="center" v-if="userStore.account.authority === 1">
                        <template #default="{row}">
                            <el-button bg type="primary" size="small" @click.native.stop="receiptManage(row)" column-key>管理发票</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-empty v-else :image-size="200"/>
            <Pagination :total="total" v-model:currentPage="currentPage" v-model:pageSize="pageSize"
                        v-model:projectList="projectList" :searchForm="searchForm" v-model:loading="loading"/>
        </el-card>
    </el-main>
</template>

<script setup>
import {reactive, ref} from 'vue'
//搜索头
import SearchHeader from "@/views/Project/components/SearchHeader.vue";
//分页
import Pagination from "@/views/Project/components/Pagination.vue";
import {useUserStore} from "@/stores/user"
import {useRouter} from "vue-router";
import {getProjectGrade, getProjectStatus} from "@/apis/enum";

const userStore = useUserStore()
const router = useRouter()

//常量
const STATUS = getProjectStatus()
const GRADE = getProjectGrade()
const show = ref(false)
//项目列表
const loading = ref(true)
const projectList = ref([])
//搜索表单
const searchForm = reactive({})
//分页信息
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const check = row => {
    const {href} = router.resolve({
        name: "previewProject",
        params: {id: row.id}
    })
    window.open(href, "_blank")
}
const receiptManage = row => {
    const {href} = router.resolve({
        name: "receiptManage",
        params: {id: row.id}
    })
    window.open(href, "_blank")
}
//日期格式化
const formattedDate = row => {
    if (!row.startTime) return
    const date = new Date(row.startTime)
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`
}
</script>

<style scoped lang="scss">

.list {
    margin: 10px 0;
}
</style>

